<template>
  <div class="nearby">
    <div class="nearby__title">
      附近店铺
    </div>
    <router-link
      :to="`/shop/${item._id}`"
      v-for="item in nearbyList"
      :key="item._id"
    >
      <ShopInfo :item="item" />
    </router-link>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
import { get } from '../../utils/request'
import ShopInfo from '../../components/ShopInfo.vue'
const useNearbyList = () => {
  const nearbyList = ref([])
  const getNearbyList = async () => {
    const reslut = await get('api/shop/hot-list')
    if (reslut?.errno === 0 && reslut?.data?.length) {
      nearbyList.value = reslut.data
    }
  }
  return { nearbyList, getNearbyList }
}
export default {
  name: 'Nearby',
  components: {
    ShopInfo
  },
  setup(props, context) {
    const { nearbyList, getNearbyList } = useNearbyList()
    onMounted(() => {
      getNearbyList()
    })
    return {
      nearbyList
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/common.scss';
.nearby {
  box-sizing: border-box;
  .nearby__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    font-weight: normal;
    letter-spacing: 0.02rem;
    color: $content-fontColor;
  }
  a {
    text-decoration: none;
  }
  .nearby__item {
    box-sizing: border-box;
    padding-top: 0.12rem;
    display: flex;
    .nearby__item__img {
      width: 0.56rem;
      height: 0.56rem;
      margin-right: 0.16rem;
    }
    .nearby__content {
      border-bottom: 0.03rem solid #f1f1f1;
      flex: 1;
      .nearby__content__title {
        font-size: 0.16rem;
        line-height: 0.22rem;
        color: $content-fontColor;
      }
      .nearby__content__tags {
        margin-top: 0.08rem;
        .nearby__content__tag {
          line-height: 0.18rem;
          font-size: 0.13rem;
          color: $content-fontColor;
          margin-right: 0.16rem;
        }
      }
      .nearby__content__hignlight {
        color: #e93b3b;
        margin: 0.08rem 0 0.12rem 0;
      }
    }
  }
}
</style>
